<template>
  <u-popup :show="show" mode="center" :closeOnClickOverlay="false" bgColor="transparent">
   <view class="reload-history-modal-wrapper">
      <view
        class="main-wrapper"
        :style="{'background-image':`url(${staticImgs.bgD})`}"
      >
        <!-- <view class="con">
          <view>已经坚持到这里了，马上就要完成咯~</view>
          <view>真的要放弃吗？</view>
        </view>
        <view class="btn-group">
          <view class="btn-box retest-btn" @click="closeHandle">
            回到测评大厅
          </view>
          <view class="btn-box report-btn" @click="confirmHandle">
            继续答题
          </view>
        </view> -->
        <view class="con">
          <view class="before-coupon-box">券前¥{{priceBefore}}</view>
          <view class="tip-text">券后仅需</view>
          <view class="price-box">
            <view class="unit">¥</view>
            <view class="num">{{priceNow}}</view>
          </view>
        </view>
        <view class="btn-wrapper"
          @click="confirmHandle"
          :style="{'background-image':`url(${staticImgs.btnImg})`}"
        >
        
        <view class="close-icon" @click.stop="closeHandle">
          <u-icon name="close-circle" color="rgba(255,255,255,.7)" size="26"></u-icon>
        </view>
          
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
  export default{
    props:{
      visible:{
        type:Boolean,
        default:false
      },
      priceBefore:{
        type:Number,
        default:0
      },
      priceNow:{
        type:Number,
        default:0
      }
    },
    data(){
      return {
        show:false,
        staticImgs:{
          bgD: this.imgBaseURL + '/scl/modal-bg-3.png',
          btnImg: this.imgBaseURL + '/scl/modal-btn-3.png',
        },
      }
    },
    watch:{
      visible:{
        handler(val){
          console.log(val,'===================== reloadHistoryVisible')
          this.show = val
        },
        immediate:true
      },
      priceNow:{
        handler(val){
          console.log(val,'===================== priceNow')
        },
        immediate:true
      }
    },
    methods:{
      confirmHandle(){
        this.show = false
        this.$emit('confirm')
      },
      closeHandle(){
        console.log('------closeHandle-------')
        this.show = false
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .reload-history-modal-wrapper{
    
    .close-icon{
      position: absolute;
      top: -28rpx;
      right: 86rpx;
    }
    
    .main-wrapper{
      background-repeat: no-repeat;
      background-size: contain;
      
      width: 672rpx;
      height: 864rpx;
      box-sizing: border-box;
      padding-top: 464rpx;
      
      .btn-wrapper{
        width: 334rpx;
        height: 86rpx;
        background-repeat: no-repeat;
        background-size: contain;
        margin: auto;
        
      }
      
      .con{
        // width: 268rpx;
        width: fit-content;
        height: 112rpx;
        // background-color: red;
        margin: auto;
        margin-bottom: 84rpx;
        position: relative;
        
            display: flex;
            align-items: flex-end;
            justify-content: center;
        
        .before-coupon-box{
          position: absolute;
              left: 0;
              top: 20rpx;
          
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 18rpx;
          color: #BC3B41;
          // line-height: 25rpx;
          text-align: center;
          font-style: normal;
          
          width: 104rpx;
          height: 30rpx;
          line-height: 30rpx;
          background: rgba(255,255,255,0.64);
          border-radius: 15rpx;
        }
        .tip-text{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
          line-height: 37rpx;
          text-align: left;
          font-style: normal;
              margin-bottom: 20rpx;

        }
        .price-box{
          display: flex;
              align-items: flex-end;
                  margin-left: 10rpx;


          
          .unit{
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 50rpx;
            color: #FFFFFF;
            line-height: 70rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 10rpx;
          }
          
          .num{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 80rpx;
            color: #FFFFFF;
            line-height: 112rpx;
            text-align: left;
            font-style: normal;
          }
        }
        
        
      }
      .btn-group{
        display: flex;
        justify-content: center;
        column-gap: 22rpx;
        
        .btn-box{
          width: 230rpx;
          height: 70rpx;
          
          border-radius: 35rpx;
          line-height: 70rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #FFFFFF;
          // line-height: 42rpx;
          text-align: center;
          font-style: normal;
          
        }
        
        .retest-btn{
          
          
          background: linear-gradient( 180deg, #FFD580 0%, #DB9B38 100%);
          
        }
        .report-btn{
          background: linear-gradient( 180deg, #73D48F 0%, #5ABB40 100%);
        }
        
        
      }
    }
    
  }             
</style>